<template>
  <el-container>
    <el-header>
      <el-form :inline="true" style="margin-top: 20px">
        <el-input label="关键字" v-model="keyword" placeholder="关键字" clearable @clear="clearConditions" >
          <el-button slot="append" type="primary" icon="el-icon-search" v-on:click="searchData"></el-button>
        </el-input>
      </el-form>
    </el-header>
    <el-main>
      <el-table height="100%" :data="dataTable.result" border style="width: 100%" highlight-current-row @row-dblclick="view">
        <el-table-column prop="roleName" label="角色名" width="200" >
          <template slot-scope="scope">
            <el-button type="text" @click="view(scope.row)" :title="scope.row.roleName" >{{ scope.row.roleName }}</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="description" label="描述" min-width="200" show-overflow-tooltip></el-table-column>
        <el-table-column prop="createTime" label="创建时间/修改时间" header-align="center" align="center" width="150">
          <template slot-scope="scope">
            {{ scope.row.createTime }}<br>
            {{ scope.row.updateTime }}
          </template>
        </el-table-column>
        <el-table-column header-align="center" align="center" width="80" fixed="right">
          <template slot="header">
            <el-button type="text" icon="el-icon-plus" @click="add" title="新增" ></el-button>
            <el-button type="text" icon="el-icon-refresh" @click="query" title="刷新" ></el-button>
          </template>
          <template slot-scope="scope">
            <el-button type="text" icon="el-icon-edit" @click="edit(scope.row)" title="编辑"></el-button>
            <el-button type="text" icon="el-icon-delete" @click="remove(scope.row)" title="删除"></el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-drawer :title="formTitle" :visible.sync="showEdit" @close="closeDialog" direction="rtl">
        <template slot="title">
          <div>
            <el-button @click="showEdit = false">取 消</el-button>
            <el-button type="primary" @click="save">确 定</el-button>
            <el-button v-if="!createNew" type="primary" @click="view(editItem)">权限设置</el-button>
          </div>
        </template>
        <el-container>
          <el-main>
            <el-form :model="editItem">
              <el-form-item label="角色名">
                <el-input v-model="editItem.roleName" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="描述">
                <el-input v-model="editItem.description" type="textarea" autocomplete="off"></el-input>
              </el-form-item>
            </el-form>
          </el-main>
        </el-container>
      </el-drawer>
    </el-main>
    <el-footer>
      <el-pagination v-on:current-change="query" :current-page.sync="queryObject.pageIndex" :page-size="queryObject.pageSize" layout="total, prev, pager, next" :total="dataTable.rowCount" ></el-pagination>
    </el-footer>
  </el-container>
</template>
<script>
import {mapState, mapMutations, mapActions} from 'vuex';
const STORE_MODULE = {
  "name": "role",
  "state": [
    "queryObject",
    "currentItem",
    "dataTable"
  ],
  "mutations": [
    "selectItem",
    "setParameters"
  ],
  "actions": [
    "query",
    "create",
    "update",
    "delete"
  ]
};
export default {
  data() {
    return {
      createNew: true,
      showEdit: false,
      editItem: {
        roleId: null,
        roleName: null,
        description: null
      },
      keyword: null
    }
  },
  computed: {
    ...mapState(STORE_MODULE.name, STORE_MODULE.state),
    formTitle(){
      return this.createNew ? "新建":"编辑";
    }
  },
  mounted() {
    this.query();
  },
  methods: {
    ...mapMutations(STORE_MODULE.name, STORE_MODULE.mutations),
    ...mapActions(STORE_MODULE.name, STORE_MODULE.actions),
    searchData(){
      this.queryObject.parameters.keyword = this.keyword;
      this.query();
    },
    closeDialog(){

    },
    resetForm(){
      for(var name in this.editItem)
        this.editItem[name] = null;
    },
    add(){
      this.resetForm();
      this.showEdit = true;
      this.createNew = true;
    },
    edit(row){
      this.resetForm();
      for(var name in this.editItem)
        this.editItem[name] = row[name];
      this.showEdit = true;
      this.createNew = false;
    },
    save(){
      let task = this.createNew ? this.create(this.editItem) : this.update(this.editItem);
      task.then((response) => {
        if (response.success){
          alert("保存成功","消息","success", ()=>{this.showEdit = false; this.createNew = true;});

        }
      });
    },
    clearConditions(){
      if (this.queryObject.parameters.keyword != this.keyword) this.searchData();
    },
    remove(row){
      confirm('确认要删除['+row.roleName+']吗？请谨慎操作！', '警告', 'warning', ()=>{

        this.delete(row.roleId).then((response) => {
          if (!response.success) {
            let msg = response.message || "操作失败";
            alert(msg,"消息","error");
          }
        });
      });
    },
    view(row){
      this.$router.push({name:'roleitem', params:{id:row.roleId} })
    },
  }
}
</script>
